<template>
  <view class="searchBox">
    <view class="input">
      <text class="iconfont icon-sousuo icon"></text>
      <input
        class="uni-input"
        @confirm="confSearch"
        confirm-type="search"
        :focus="isFocus"
        v-model="newValue"
        placeholder="搜索"
      />
    </view>

    <view class="searchList" v-if="songList.length != 0">
      <view
        class="searchItem appFlex-one"
        v-for="(item, index) in songList"
        :key="index"
        @click="goPlayDet(item, index)"
      >
        <view class="left">
          <view class="song">{{ item.name }}</view>
          <view class="name">{{ item.artists[0].name }}</view>
        </view>
        <text class="iconfont icon-bofang icon"></text>
      </view>
    </view>

    <view v-else>
      <NewMusic :newMusicList="newMusicList"></NewMusic>
    </view>
  </view>
</template>

<script>
import NewMusic from "../../components/Index/NewMuics"; //引入最新音乐
export default {
  components: {
    NewMusic,
  },
  data() {
    return {
      isFocus: true, //自动获取焦点
      newValue: "", //搜索的值
      songList: [], //搜索到的歌曲列表
      newMusicList: [], //如果搜索的歌曲为0就显示最新音乐的歌曲列表
    };
  },
  onLoad() {
    this.getNewMusic();
  },
  methods: {
    confSearch() {
      this.getSearch(this.newValue);
    },
    // 获取搜索的歌曲
    getSearch(keywords) {
      this.request("/search", "GET", {
        keywords: keywords,
        limit: 35,
        offset: 1,
        type: 1,
      }).then((res) => {
        this.songList = res.result.songs;
      });
    },
    //跳转播放详情
    goPlayDet(item, index) {
      this.$store.commit("changePalyList", this.songList);
      this.$store.commit("changePlay", true);
      this.$store.commit("changeCurrentIndex", index);

      let id = item.id;
      uni.navigateTo({
        url: "/pagesC/playDet/PlayDet?id=" + id,
      });
      uni.setNavigationBarTitle({
        title: item.name,
      });
    },
    //获取最新音乐
    getNewMusic() {
      this.request("/top/song", "GET", { type: 0 }).then((res) => {
        this.newMusicList = res.data.splice(0, 20);
      });
    },
  },
};
</script>

<style lang="less">
.searchBox {
  width: 750rpx;
  .input {
    margin: 0 auto;
    margin-top: 33rpx;
    width: 700rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background: #f1f1f1;
    border: 2rpx solid #ccc;
    line-height: 60rpx;
    color: #999;
    .icon {
      margin: 0 20rpx;
      vertical-align: 18rpx;
    }
    input {
      display: inline-block;
      height: 60rpx;
    }
  }
  .searchList {
    width: 690rpx;
    margin: 0 auto;
    .searchItem {
      width: 100%;
      height: 150rpx;
      margin-top: 30rpx;
      border-bottom: 2rpx solid #ccc;
      .left {
        .song {
          font-size: 35rpx;
          color: #89a7c9;
          margin-bottom: 12rpx;
        }
        .name {
          font-size: 30rpx;
          color: #999;
        }
      }
      .icon {
        font-size: 80rpx;
        color: #999;
      }
    }
  }
}
</style>